<!--支部任务-->
<template>
  <div class="contents-main">
    <!--筛选区域-->
    <div class="screening">
      <div class="theMenu">
        <span>{{ partyBranch }}</span><span @click="screening" v-if="$store.state.thePartyBranch321.selectBranch"><van-icon name="filter-o"/>筛选</span>
      </div>
    </div>
    <van-collapse v-model="activeNames">
      <!--已完成任务列表-->
      <van-collapse-item :value="activeNames.includes('complete') ? '收起' : '展开'" name="complete" title-class="titleCard" value-class="valueCard">
        <template #title>
          <div class="title"><img src="@/assets/static/image/thePartyBranch321/biaoti@2x.png" alt="">已完成任务列表</div>
        </template>
        <CardList type="listHasBeenCompleted" ref="toBeProcessed"></CardList>
      </van-collapse-item>
      <!--未完成任务列表-->
      <van-collapse-item :value="activeNames.includes('toBeProcessed') ? '收起' : '展开'" name="toBeProcessed" title-class="titleCard" value-class="valueCard">
        <template #title>
          <div class="title"><img src="@/assets/static/image/thePartyBranch321/biaoti@2x.png" alt="">未完成任务列表</div>
        </template>
        <CardList type="unfinishedList" ref="theTaskList"></CardList>
      </van-collapse-item>
    </van-collapse>
    <!--筛选弹窗-->
    <van-popup v-model="show" round position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" class="branchTask"/>
    </van-popup>
  </div>
</template>
<script>
import CardList from "components/workReminders/CardList.vue";
import * as _ from "lodash";
export default {
  components:{ CardList },
  data() {
    return {
      show:false,//筛选弹窗状态
      orgList:[],//公司名称数组,
      activeNames: ['complete','toBeProcessed'],//展开收起选项
      theCompanyStructure: '',//公司组织结构
      columns: [],//筛选弹窗数据
      partyBranch:'',//支部名称
      companyName:'',//公司名称
      screeningSchedule:{},//筛选表
    };
  },
  created(){
    this.getOrg()
    this.columns = [{ values: Object.keys(this.theCompanyStructure) }, { values: this.theCompanyStructure[Object.keys(this.theCompanyStructure)[0]] }];
    },
  mounted(){
    this.$refs.theTaskList.branchScreening({companyName:this.companyName,orgUuid:this.screeningSchedule[this.partyBranch]})
    this.$refs.toBeProcessed.branchScreening({companyName:this.companyName,orgUuid:this.screeningSchedule[this.partyBranch]})
  },
  methods:{
    /**
     * 筛选弹窗确认
     * @param value 选择的值
     */
    async onConfirm(value){
      //拿到支部名称
      this.partyBranch = value[1];
      //拿到公司名称
      this.companyName = value[0];
      this.$refs.theTaskList.branchScreening({companyName:this.companyName,orgUuid:this.screeningSchedule[this.partyBranch]})
      this.$refs.toBeProcessed.branchScreening({companyName:this.companyName,orgUuid:this.screeningSchedule[this.partyBranch]})
      this.show = false;
    },
    /**
     * 筛选弹窗取消
     */
    onCancel() {
      this.show = false
    },
    /**
     * 设置默认选项
     * @param picker 整个筛选数据
     * @param values 当前列
     */
    onChange(picker, values) {
      //默认选择第一项
      picker.setColumnValues(1, this.theCompanyStructure[values[0]]);
    },
    /**
     * 设置公司组织
     */
    async getOrg() {
      const newScreeningScheduleData = {
        value:[],
      };//临时筛选表
      const data = _.cloneDeep(this.$store.state.thePartyBranch321.orgList);
      Object.keys(data).forEach(item => {
        newScreeningScheduleData.value = newScreeningScheduleData.value.concat(data[item])
        data[item] = data[item].map(list => list.orgShortName)
      })
      //将临时筛选表转换成对象
      newScreeningScheduleData.value.forEach(item => {
        this.screeningSchedule[item.orgShortName] = item.orgUUID
      })
      this.theCompanyStructure = data
      this.companyName = this.$store.state.thePartyBranch321.userInfo.companyName;
      if ( this.$store.state.thePartyBranch321.userInfo?.partyUser?.partyOrg?.orgShortName ) {
        this.partyBranch = this.$store.state.thePartyBranch321.userInfo?.partyUser?.partyOrg?.orgShortName;
      } else {
        // 如果用户是管理员，则省公司下面的数组的默认第一条数据的orgShortName，
        this.partyBranch = this.$store.state.thePartyBranch321.orgList[Object.keys(this.$store.state.thePartyBranch321.orgList)[0]][0].orgShortName;
      }
    },
    /**
     * 筛选弹窗
     */
    screening(){
      this.show = !this.show
    },
  }
};
</script>



<style scoped lang="less">
@import "@/assets/css/thePartyBranch321/thePartyBranch321.less";
</style>